<template>
  <div>
    <div class="top">
      <van-search
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="about">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="handleTable(index)"
          :class="index == idx ? 'active' : ''"
        >
          {{ item.cate_name }}
        </li>
      </ul>
      <div class="bigBox" ref="wrap">
        <div class="bbox">
          <div v-for="(item, index) in list" :key="index" class="box">
            <van-divider
              :style="{
                color: '#333',
                borderColor: '#bbbbbb',
                fontWeight: '700',
                fontSize: '14px',
              }"
              :ref="`title${index}`"
            >
              {{ item.cate_name }}
            </van-divider>
            <div class="box-content">
              <van-row type="flex" justify="left">
                <van-col
                  span="8"
                  v-for="(ite, i) in item.children"
                  :key="i"
                  @click="handletab(ite.id)"
                >
                  <img span="8" :src="ite.pic" alt="" />
                  <p>{{ ite.cate_name }}</p>
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="zw"></div>
        </div>
      </div>
    </div>
  </div>
</template>






<script>
// import axios from 'axios'
import BScroll from "@better-scroll/core";
import { getlist } from "../api/goods";
export default {
  data() {
    return {
      list: [],
      idx: 0,
      p:0,
    };
  },
  created() {
    getlist().then((res) => {
      this.list = res.data.data;
      this.$nextTick(() => {
        this.initBs();
      });
    });
  },
  methods: {
    handletab(id) {
      this.$router.push({ path: `/tab/${id}` });
    },
    handleTable(index) {
      this.idx = index;
      // 找到当前菜单所对应的标题元素  ref
      let refKey = `title${index}`;
      let titleRef = this.$refs[refKey][0];
      // 获取该ref的offsetTop
      if(this.p==0){
        let top = titleRef.offsetTop-50;
        this.bs.scrollTo(0, -top, 1000);
        this.p++
      }else{
        let top = titleRef.offsetTop+14;
        this.bs.scrollTo(0, -top, 1000);
      }
      // 调用scrollTo滚动至目标位置
      
    },
    handleScroll(position) {
      // BS的滚动距离       sTop
      // console.log(position);
      // 分类标题的offsetTop   top
      let arr = [];
    },
    initBs() {
      let { wrap } = this.$refs;
      this.bs = new BScroll(wrap, {
        probeType: 1, //开启滚动事件监听
        click:true
      });
      this.bs.on("scroll", (position) => {
        //开启滚动事件监听
        this.handleScroll(position);
      });
    },
  },
};
</script>










<style lang="less" scoped>
.zw {
  height: 290px;
}
.top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
ul > .active {
  background-color: #fff;
  border-left: 2px solid #ff448f;
  width: 100%;
  text-align: center;
  color: #ff448f;
  font-weight: 700;
}
.van-col {
  height: 80px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about {
  width: 100%;
  height: 100%;
  ul {
    background-color: #f7f7f7;
    height: 100%;
    width: 26%;
    position: fixed;
    left: 0;
    top: 8%;
    li {
      width: 100%;
      text-align: center;
      font-size: 13px;
      line-height: 50px;
      padding-left: 2px;
    }
  }
  .bigBox {
    width: 70%;
    height: 80vh;
    margin: 0 7px;
    overflow: hidden;
    float: right;
    margin-top: 50px;
    .box {
      width: 100%;
      height: 100%;
      padding: 0;
      .box-content {
        width: 100%;
        height: 100%;
        .van-row {
          width: 100%;
          height: 100%;
          img {
            width: 60px;
            height: 60px;
          }
          p {
            font-size: 12px;
            color: #333;
            height: 28px;
            width: 60px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>